<template>
  <div class="profile-container">
    <div class="title-container">
      <h1>
        <el-input
          v-model="userName"
          :class="{'name-input': true}"
          placeholder="请输入用户名"
          @blur="updateName"
        />
      </h1>
      <!-- <p>这里是个人中心页面</p> -->
    </div>
    <div class="avatar-upload">
      <el-upload
        class="avatar-uploader"
        action=""
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        :http-request="uploadAvatar"
      >
        <img v-if="avatarUrl" :src="avatarUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
    </div>
  </div>
</template>

<script>
import { updateUser, getUserData } from '@/api/group'

export default {
  data() {
    return {
      userName: '',
      avatarUrl: ''
    }
  },

  created() {
    this.loadAvatar()

    if (!this.userName) {
      getUserData().then(response => {
        this.userName = response.data.user
        this.$message.success('获取成功')
      }).catch(error => {
        this.$message.error('获取用户数据失败', error)
      })
    }

    // 获取消息
  },

  methods: {
    updateName() {
      updateUser({ user: this.userName }).then(response => {
        this.$message.success('更新头像成功')
      }).catch(error => {
        console.error('更新失败', error)
      })
    },
    /**
     * 验证上传的头像文件
     * @param {File} file - 上传的文件对象
     * @returns {boolean} - 是否通过验证
     */
    beforeAvatarUpload(file) {
      const isImage = ['image/jpeg', 'image/png'].includes(file.type)
      const isSizeValid = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        return false
      }

      if (!isSizeValid) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }

      return true
    },

    /**
     * 上传头像处理
     * @param {Object} param - 包含file属性的对象
     */
    uploadAvatar({ file }) {
      const reader = new FileReader()

      reader.onload = () => {
        this.avatarUrl = reader.result
        this.saveAvatar(reader.result)
        this.$message.success('头像上传成功')
      }

      reader.readAsDataURL(file)
    },

    loadAvatar() {
      // 修改为仅从localStorage获取
      const localAvatar = localStorage.getItem('userAvatar')
      this.avatarUrl = localAvatar || ''
    },

    /**
     * 保存头像到store和localStorage
     * @param {string} avatar - 头像base64数据
     */
    saveAvatar(avatar) {
      localStorage.setItem('userAvatar', avatar)
      this.$store.commit('user/xtx', avatar)
    }
  }
}
</script>

<style scoped>
.profile-container {
  height: 89vh;
  padding: 110px 40px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.title-container {
  text-align: center;
  margin-bottom: 30px;
}

.avatar-uploader {
  text-align: center;
  margin: 30px 0;
  position: relative;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  background: white;
  border: 3px dashed #d9d9d9;
  transition: all 0.3s ease;
}

.avatar-uploader-icon:hover {
  border-color: #409EFF;
  color: #409EFF;
}

.name-input {
  width: auto;
  display: inline-block;
  margin-bottom: 20px;
}

.name-input >>> .el-input__inner {
  border: none;
  padding: 0;
  font-size: 2.5em;
  font-weight: bold;
  color: #2c3e50;
  text-align: center;
  background: transparent;
}

.name-input >>> .el-input__inner:focus {
  outline: none;
  border-bottom: 2px solid #409EFF;
}
</style>
